<template>
  <div class="top">
    <span>共有 {{ MsNum }} 条未读消息</span>
    <a-button type="primary" ghost size="small" @click="removeMessage()">
      一键已读
    </a-button>
  </div>
  <div class="body">
    <div
      id="list"
      v-for="(item, index) in MessageList"
      :key="index"
      @click="removeMessage(item)"
    >
      <div id="listTop" v-if="item.type == 1">
        <a-avatar :src="item.chead" />
        <div>{{ item.cname }} 给你的文章 {{ item.title }} 评论了</div>
      </div>
      <div id="listTop" v-else>
        <a-avatar :src="item.chead" />
        <div>{{ item.cname }} 给你的动态评论了</div>
      </div>
      <div style="margin-top: 10px">{{ item.ccontent }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
// import { UserOutlined } from "@ant-design/icons-vue";
import { getCoMessage, removeCoMessage } from "../../api/users";

export default defineComponent({
  setup() {
    const router = useRouter();
    const MsNum = ref(0);
    const MessageList = ref([]);

    const removeMessage = (item) => {
      if (!item) {
        removeCoMessage({
          url: "/users/removeCoMessage",
          success: () => {
            location.reload();
          },
          err: (err) => {
            console.log(err);
          },
        });
      } else {
        removeCoMessage({
          url: "/users/removeCoMessage",
          aid: item.aid,
          did: item.did,
          cid: item.cid,
          success: (res) => {
            // console.log(res.data);
            if (res.data.did == "") {
              sessionStorage.setItem("AID", res.data.aid);
              router.push({ path: "/contentPage" });
            } else {
              sessionStorage.setItem("DID", res.data.did);
              router.push({ path: "/contentPage2" });
            }
          },
          err: (err) => {
            console.log(err);
          },
        });
      }
    };

    getCoMessage({
      url: "/users/getCoMessage",
      success: (res) => {
        // console.log(res.data);
        MsNum.value = res.data.MsNum;
        for (let i = 0; i < res.data.MsAsList.length; i++) {
          MessageList.value.push({
            type: 1,
            aid: res.data.MsAsList[i].aid,
            cid: res.data.MsAsList[i].cid,
            cname: res.data.MsAsList[i].cname,
            chead: "http://localhost:3000/" + res.data.MsAsList[i].chead,
            title: res.data.MsAsList[i].title,
            ccontent: res.data.MsAsList[i].ccontent,
          });
        }
        for (let i = 0; i < res.data.MsDyList.length; i++) {
          MessageList.value.push({
            type: 2,
            did: res.data.MsDyList[i].did,
            cid: res.data.MsDyList[i].cid,
            cname: res.data.MsDyList[i].cname,
            chead: "http://localhost:3000/" + res.data.MsDyList[i].chead,
            ccontent: res.data.MsDyList[i].ccontent,
          });
        }
        // console.log(MessageList.value);
      },
      err: (err) => {
        console.log(err);
      },
    });

    return {
      router,
      MsNum,
      MessageList,
      removeMessage,
    };
  },
  components: {},
});
</script>

<style scoped>
.top {
  margin: 0 10px 0 10px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.body {
  margin: 20px 10px 0 10px;
}
#list {
  height: 100px;
  border: 1px solid rgb(212, 212, 212);
  overflow: hidden;
}
#list:hover {
  background: #ceefff;
  cursor: pointer;
}
#listTop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
</style>